<template>
  <div class="timing">
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formInline" class="demo-form-inline queryFrom">
          <el-form-item label="名称">
            <el-input v-model="formInline.subjectName" clearable placeholder="" />
          </el-form-item>
          <el-form-item label="类型">
            <el-select v-model="formInline.modelType" clearable placeholder="请选择">
              <el-option
                v-for="(item,i) in options1"
                :key="i"
                :label="item.typeName"
                :value="item.modelTypeId"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button plain @click="getUserList"><Icon type="ios-search" />查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <!-- 按钮 -->
    <el-row style="margin-bottom:10px;">
      <el-col :span="24">
        <el-button type="primary" @click="addUser('add')"><Icon type="md-add" />新 增</el-button>
      </el-col>
    </el-row>
    <!-- 表格 -->
    <testhttb @deleteSelectData="deleteSelectData" ref="httbRef" :table-col="tabUserList" :table-data="tableUserData" @refresh="getUserList" />
    <!-- 分页 -->
    <div style="text-align:right;margin-top:10px;">
      <el-pagination
        :current-page="page"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog :close-on-click-modal="false" :title="title" :visible.sync="dialogTableVisible">
      <el-form v-if="dialogTableVisible" ref="ruleForm" :model="ruleForm" :rules="rules" label-width="100px" class="demo-ruleForm autoClass">
        <el-form-item label="模型名称" prop="modelName">
          <el-input v-model="ruleForm['modelName']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="模型类型" prop="modelType">
          <el-select v-model="ruleForm['modelType']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in options1"
              :key="i"
              :label="item.typeName"
              :value="item.typeName"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="模型地址" prop="modelUrl">
          <el-input v-model="ruleForm['modelUrl']" clearable placeholder="" />
        </el-form-item>
        <el-form-item label="供应商" prop="firmId">
          <el-select v-model="ruleForm['firmId']" clearable placeholder="请选择">
            <el-option
              v-for="(item,i) in options2"
              :key="i"
              :label="item.firmName"
              :value="item.firmId"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="备注" prop="remark">
          <el-input v-model="ruleForm['remark']" />
        </el-form-item>
        <!-- <el-form-item label="模型照片" prop="modelImg">
          <el-upload
            class="upload-demo"
            style="position:relative"
            :action="httpUrl+get_branch+'/ht-user/user/upload'"
            :headers="headers"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :before-remove="beforeRemove"
            :on-success="onSuccess"
            multiple
            :limit="1"
            :on-exceed="handleExceed"
            :file-list="fileList"
          >
            <el-button size="small" type="primary">点击上传</el-button>
            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>
        </el-form-item> -->
        <el-form-item label="状态" prop="state">
          <el-radio-group v-model="ruleForm['state']">
            <el-radio label="0">正常</el-radio>
            <el-radio label="1">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">{{ btnStr }}</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from '@/utils/auth'
import { getFirmPageList, modelTypePageList, addmodelpageList, 
  getmodelpageList, modelupdate,modelRemoves,codeManagelistByCodeMain } from '@/api/home_/experiment'
import experiment from '@/mixins/experiment'
export default {
  components: {
  },
  mixins: [experiment],
  data() {
    return {
      moduleListOptions:[],
      httpUrl: process.env.VUE_APP_BASE_API,
      headers: {
        Authorization: 'bearer ' + getToken()
      },
      options1: [],
      fileList: [],
      options2: [],
      ruleForm: {
        'modelName': '',
        'modelType': '',
        'modelUrl': '',
        'remark': '',
        'state': ''
      },
      title: '新增',
      rules: {},
      dialogTableVisible: false,
      formInline: {
        subjectName: '',
        modelType: ''
      },
      tableUserData: [],
      tabUserList: [
        {
          key: 'modelName',
          title: '模型名称'
        },
        {
          key: 'modelType',
          title: '模型类型'
        },
        {
          key: 'modelUrl',
          title: '模型地址'
        },
        {
          key: 'firmId',
          title: '供应方'
        },
        {
          key: ' ',
          title: '数据提供方'
        },
        {
          key: ' ',
          title: '试验信息'
        },
        {
          key: ' ',
          title: '模型图片'
        }
      ],
      total: 0,
      size: 10,
      page: 1
    }
  },
  created() {
    codeManagelistByCodeMain('model_type').then(res=>{
      this.moduleListOptions = res.data
    })
  },
  mounted() {
    this.$nextTick(() => {
      this.getUserList(1)
    })
  },
  methods: {
    deleteSelectData(v) {
      modelRemoves({ ids: [v.modelId] }).then(res => {
        if (res.code == 200) {
          this.getUserList(1)
        } else {
          this.$notify.error({
            title: '错误',
            message: res.msg
          })
        }
      })
    },
    onSuccess(v) {
    },
    handleRemove(file, fileList) {
    },
    handlePreview(file) {
    },
    handleExceed(files, fileList) {
      // this.$message.warning(`当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
    },
    beforeRemove(file, fileList) {
      // return this.$confirm(`确定移除 ${file.name}？`)
    },
    commitFromData() {
      if (this.ruleForm.hasOwnProperty('id')) {
        modelupdate(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      } else {
        addmodelpageList(this.ruleForm).then(res => {
          if (res.code == 200) {
            this.dialogTableVisible = false
            this.getUserList()
          } else {
            this.errorDialog(res.msg)
          }
        })
      }
    },
    handleSizeChange(v) {
      this.page = 1
      this.size = v
      this.getUserList()
    },
    handleCurrentChange(v) {
      this.page = v
      this.getUserList()
    },
    // 获取用户列表
    getUserList(v) {
      getmodelpageList({
        'current': this.page,
        data: {
          'subjectName': this.formInline.subjectName,
          'modelType': this.formInline.modelType
        },
        'size': this.size
      }).then(res => {
        this.tableUserData = res.data.records
        this.total = res.data.total
      })

      if (v == 1) {
        modelTypePageList({
          'current': 1,
          'data': {
            'modelName': '',
            'modelType': ''
          },
          'size': 1000
        }).then((res) => {
          this.options1 = res.data.records
        })
        getFirmPageList({
          data: {
            'firmName': ''
          },
          'size': 100,
          'current': 1
        }).then(res => {
          this.options2 = res.data.records
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select{
    width:100%;
  }
  .timing{
    background:#fff;
    padding:20px;
  }
  .autoClass{
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  .el-form-item{
      width:50%;
  }
}
</style>
